<template>
  <view class="commentCreate">
    <view class="inputView" @click="showInput">写评论</view>
    <view class="lh-flex lh-items-center lh-mr-14" @click="switchCollect">
      <up-icon name="star-fill" size="50rpx" color="#00aaf6" v-if="isCollect"></up-icon>
      <up-icon v-else name="star" size="50rpx" color="#999999" ></up-icon>
    </view>
    <view class="exchangeWeChat" @click="switchWechat">
      <up-icon name="weixin-fill" color="#fff" size="38rpx"></up-icon>
      交换微信
    </view>
  </view>
  <CommentInput
    v-if="commentInputShow"
    class="CommentInputWrap"
    @close="() => (commentInputShow = false)"
  />
</template>

<script setup>
import { ref,defineProps } from "vue";
import CommentInput from "@/components/CommentInput/index";
import collectionManagement  from '@/api/collectionManagement'
import useUserInfo from '@/hooks/useUserInfo'
import switchWechatManagement from '@/api/switchWechatManagement'

const {userInfo} = useUserInfo()
const props = defineProps({
  articleId: {
    type: String,
    required: true,
  },
});
const commentInputShow = ref(false);
const showInput = () => {
  commentInputShow.value = true;
};
const isCollect = ref(false);
collectionManagement.checkArticleIsInCollection(userInfo.value.userId,props.articleId).then((res) => {
  if (res.data) {
    isCollect.value = res.data;
  }
}).catch((err) => {
  console.log(err);
});
function switchCollect() {
  console.log("switchCollect");
  isCollect.value = !isCollect.value;
  if (isCollect.value) {
    collectionManagement.createNewCollection({
      userId:userInfo.value.userId,
      articleId:props.articleId
      // articleAuthorName:
    }).then((res) => {
      console.log(res);
    }).catch((err) => {
      console.log(err);
    });
  }
}

function switchWechat() {
  console.log("switchWechat");
  switchWechatManagement.createSwitchWechatRequest({
    // private String requesterUserId;
    // private String requesterUserName;
    // private String requesterUserProfileUrl;
    // private String requesterUserWechatId;
    // private String requesterUserLocation;
    // private String requesterUserLocationId;
    //
    // private String receiverUserId;
    // private String receiverUserName;
    // private String receiverUserProfileUrl;
    // private String receiverUserWechatId;
    // private String receiverUserLocation;
    // private String receiverUserLocationId;
    //
    // private String resourceArticleId;
    // private String resourceArticleTitle;
    // private String resourceArticleFirstPicUrl;
    // private Long creationTimestamp;
    // private Long approveTimestamp;
    // private Long lastUpdatedTimestamp;
    // private String approvingStatus;
    requesterUserId:userInfo.value.userId,
    receiverUserId:props.articleId,
  }).then((res) => {
    console.log(res);
  }).catch((err) => {
    console.log(err);
  });
}

defineExpose({
  showInput,
});
</script>

<style lang="scss">
.commentCreate {
  width: 100%;
  background: #ffffff;
  box-shadow: 0rpx -2rpx 4rpx 0rpx rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  padding: 32rpx 74rpx calc(24rpx + env(safe-area-inset-bottom) / 2);
  position: fixed;
  bottom: 0;
  left: 0;
}
.inputView {
  width: 348rpx;
  height: 52rpx;
  display: flex;
  align-items: center;
  padding-left: 30rpx;
  font-size: 26rpx;
  color: #999;
  background-color: #f6f6f6;
  border-radius: 34rpx;
  margin-right: 30rpx;
}
.CommentInputWrap {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
}
.exchangeWeChat {
  background-color: #5fc056;
  width: 180rpx;
  height: 52rpx;
  border-radius: 20rpx;
  color: #fff;
  font-size: 26rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16rpx;
}
</style>
